<template>
  <div class="file-upload">
    <el-dialog
      title="文件上传"
      :visible="dialogVisible"
      destroy-on-close
      append-to-body
      @close="hide"
    >
      <span style="font-weight: bold;">上传到</span>
      <span class="has-whitespace ml-10">{{ dirName }}</span>
      <input ref="fileElem" type="file" multiple class="hidden" @change="handleFiles">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="300px"
        stripe
      >
        <el-table-column label="名称" prop="name" min-width="42%" />
        <el-table-column label="类型" prop="type" min-width="20%" />
        <el-table-column label="大小" min-width="20%">
          <template slot-scope="scope">{{ scope.row.size | formatDate }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="130px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="deleteRow(scope.$index)"
            >
              移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="small" @click="openFilePicker">
        选择文件
      </el-button>
      <el-button type="primary" size="small" :class="{ blurry: !tableData.length }" class="mt-10" @click="uploadtohide">
        上传
      </el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'FileUploadDialog',
  filters: {
    formatDate(arg) {
      if (arg >= 1024 && arg < 1048576) {
        return parseFloat(arg / 1024).toFixed(2) + 'KB';
      } else if (arg >= 1048576) {
        return parseFloat(arg / 1048576).toFixed(2) + 'MB';
      } else if (arg < 1024) {
        return arg;
      } else {
        return parseFloat(arg / 1073741824).toFixed(2) + 'GB';
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      isputin: 1, // 是否有上传文件
      tableData: [],
      names: []
    };
  },
  computed: {
    dirName() {
      const node = this.$store.state.functions.uploadNode;
      if (node) {
        console.log(`${node.path}/${node.label}`);
        return `${node.path}/${node.label}`;
      } else {
        return '/';
      }
    }
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    hide() {
      this.names = [];
      this.tableData = [];
      this.dialogVisible = false;
    },
    deleteRow(index) {
      this.names.splice(index, 1);
      this.tableData.splice(index, 1);
    },
    handleFiles(event) {
      const files = event.target.files;
      files.forEach((file) => {
        if (!this.names.includes(file.name)) {
          this.names.push(file.name);
          this.tableData.push(file);
        }
      });
    },
    openFilePicker() {
      this.$refs.fileElem.click();
    },
    upload() {
      const files = this.tableData;
      console.log(files);
      if (this.tableData.length > 0) {
        files.forEach(async(file) => {
          try {
            await this.$store.dispatch('functions/uploadFile', file);
            this.$message({
              message: `文件${file.name}上传成功`,
              offset: 40,
              type: 'success'
            });
          } catch (err) {
            console.error(err);
          }
        });
        this.isputin = 1;
      } else {
        this.$message.error('请传入文件！');
        this.isputin = 0;
        return;
      }
    },
    uploadtohide() {
      this.upload();
      if (this.isputin === 1) {
        this.hide();
      }
    }
  }
};
</script>

<style lang="scss">
.hidden {
  display: none;
}

.has-whitespace {
  white-space: pre-wrap;
  color: #333;
}
</style>
